<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery.js"></script>
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            table-layout:fixed ;
            border-collapse:collapse;
            word-break:break-all

        }
        td{


            height: 80px;
            text-align: center;
            border: 0.5px solid rgb(52, 56, 37);




        }
        th{
            text-align: center;
            border: 0.5px solid rgb(173, 169, 169);
            height: 40px;
            table-layout:fixed ;
            background-color: rgb(72, 241, 213);


        }

    </style>
</head>
<body onload="action();">


<table style="width: 90%;height: auto;border-radius: 6px;" id="ta">

</table>

<script>
    let one="";
    let ha="<caption><h2>奖 项 表<h2></caption><tr><th>ID</th><th>姓名</th><th>奖项名称</th><th>获奖描述</th><th>图片</th></tr>";
    function action(){

        $.ajax({

            type: "post",
            url: "/awards/selectAll",			//请求地址******************************************************************************要填
            async:false,
            dataType:"json",//返回类型
            xhrFields:{
                withCredentials:true,
            },
            crossDomain: true,
            success: function (result) {

                for(let i=result.length-1;i>=0;i--){
                    var ID=result[i].id,name=result[i].name,project=result[i].title,text=result[i].des;
                    let ak=result[i].url;
                    //alert(ak);

                    ha+="<tr><td style=\'background-color:rgb(243, 240, 215);\'>"+ID+"</td><td style=\'background-color:rgb(237, 247, 194)\'>"+name+"</td><td style=\'background-color:rgb(243, 240, 215);\'>"+project+"</td><td style=\'background-color:rgb(237, 247, 194)\'>"+text+"</td><td style=\'background-color:rgb(243, 240, 215)\'><img src="+ak+" style='width:100%;height:100%;'></td></tr>";
                }
                document.getElementById("ta").innerHTML = ha;

            }
        });

    }

</script>

</body>
</html>